<template>
  <VanSpace
    class="base-space"
    :align="align"
    :direction="spaceDirection"
    :size="showSize"
    :style="style"
  >
    <slot></slot>
  </VanSpace>
</template>

<script setup>
import { computed } from "vue";
import { formatGapSize } from "../utils/cssUtils";

const props = defineProps({
  justify: String,
  align: {
    type: String,
    default: "center",
  },
  size: {
    type: [Number, String, Array],
    default: "md",
  },
  isVertical: Boolean,
  direction: {
    type: String,
    default: "horizontal",
  },
});

let showSize = computed(() => {
  if (Array.isArray(props.size)) {
    return props.size.map((item) => formatGapSize(item));
  } else {
    return formatGapSize(props.size);
  }
});

let spaceDirection = computed(() => {
  return props.isVertical ? "vertical" : props.direction;
});

let style = computed(() => {
  let justify = props.justify;

  if (["start", "end"].includes(justify)) {
    justify = `flex-${justify}`;
  } else if (["between", "around", "evenly"].includes(justify)) {
    justify = `space-${justify}`;
  }

  return {
    "justify-content": justify || false,
  };
});
</script>

<style lang="scss" scoped>
::v-deep(.van-space-item:empty) {
  display: none;
}
</style>
